<!--
  @author:  long
  @date:    2024/5/29
  @file:    xx
  @require:
-->
<template>
  <div class="projectSettings">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-menu
          :default-active="activeIndex"
          @select="handleSelectMenu"
          style="height: 76vh"
        >
          <el-menu-item index="infoEdit">
            <span>基本信息</span>
          </el-menu-item>
          <el-menu-item index="advanced">
            <span>高级设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <!--     基础信息修改      -->
        <template v-if="activeIndex == 'infoEdit'">
          <edit-project-info ref="editProjectInfoRef"></edit-project-info>
        </template>
        <!--     高级设置     -->
        <template v-if="activeIndex == 'advanced'">
          <advanced-setting ref="advancedSettingRef"></advanced-setting>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="ProjectSettings">
import { getCurrentInstance } from 'vue'
import EditProjectInfo from '@/views/researchManage/projectDetailsManage/modal/EditProjectInfo.vue'
import AdvancedSetting from '@/views/researchManage/projectDetailsManage/modal/AdvancedSetting.vue'

const { proxy } = getCurrentInstance()

const activeIndex = ref('')
const projectId = ref('')

onBeforeMount(() => {
  //获取router的modal参数
  activeIndex.value = proxy.$route.query.handle
})

watch(
  () => proxy.$route.query,
  newQuery => {
    // 处理参数变化
    console.log('newQuery', newQuery)
    activeIndex.value = newQuery.handle
    projectId.value = newQuery.projectId
  },
  { immediate: true }
)

const handleSelectMenu = key => {
  activeIndex.value = key
  console.info(key)
}
</script>

<style scoped lang="scss"></style>
